<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/DateFormat.js"></script>
    <style>
        .container {
            width: 800px;
            margin: 50px auto;
            /* min-height: 500px;
            border: 1px solid #333; */
        }

        .comment-box .comment-wrapper .comment-content {
            width: 100%;
            height: 200px;
            resize: none;
            outline: none;
            padding: 5px;
            box-sizing: border-box;
            vertical-align: top;
        }

        .comment-box .comment-footer {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .comment-box .comment-footer .comment-tips {
            font-size: 14px;
        }

        .comment-list {
            margin-top: 50px;
            font-size: 13px;
        }

        .comment-list .comment-item {
            line-height: 20px;
            padding: 10px;
        }

        .comment-list .comment-item+.comment-item {
            border-top: 1px solid #dadce0;
        }

        .comment-list .comment-item-head {
            display: flex;
        }

        .comment-list .comment-item-head span+span {
            margin-left: 20px;
        }

        .comment-list .comment-item-content {
            display: flex;
        }

        .comment-list .comment-item-content span+span {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="comment-box">
            <div class="comment-wrapper">
                <textarea class="comment-content"></textarea>
            </div>
            <div class="comment-footer">
                <div class="comment-tips">
                    你还可以输入60个字
                </div>
                <button class="comment-send">发送</button>
            </div>
        </div>
        <ul class="comment-list">
            <!-- <li class="comment-item">
                <div class="comment-item-head">
                    <span>张三:</span>
                    <span>你在干什么!</span>
                </div>
                <div class="comment-item-content">
                    <span>2022-11-3 11:41</span>
                    <span>赞</span>
                    <span>踩</span>
                    <span>回复</span>
                </div>
            </li>
            <li class="comment-item">
                <div class="comment-item-head">
                    <span>张三:</span>
                    <span>你在干什么!</span>
                </div>
                <div class="comment-item-content">
                    <span>2022-11-3 11:41</span>
                    <span>赞</span>
                    <span>踩</span>
                    <span>回复</span>
                </div>
            </li> -->

        </ul>

    </div>
</body>
<script>
    // 留言板
    // 1. 输入提示
    //   a. 当在textarea按下按键时, keypress触发在内容输入之前,取值时,始终错了一位 =>解决方法,按键松开时 重新统计
    //   b. 中文输入法悬浮在文本框之上 => 使用中文输入法可以继续在文本框中输入内容(卡bug) => 截取方法 将超出的内容截掉

    // 2. 点击发送 + 快捷键发送(ctrl + enter)

    // 文本输入相关的事件 oninput onkeypress onkeydown onkeyup


    var commentContent = document.getElementsByClassName("comment-content")[0];
    var commentTips = document.getElementsByClassName("comment-tips")[0];
    var commentSend = document.getElementsByClassName("comment-send")[0];
    var commentList = document.getElementsByClassName("comment-list")[0];

    document.addEventListener("keypress", inputHandler);
    document.addEventListener("keyup", inputHandler);
    document.addEventListener("input", inputHandler);

    commentSend.addEventListener("click", sendComment);


    // JS动态生成的两种方式
    // 1. 模板字符串
    // 优点: 可以根据既定的模板 => 快速生成对应的html结构
    // 缺点: 在没有放到页面之前,都属于字符串=>无法给对应的元素绑定事件 => 等放到页面中=>渲染为html元素 => 获取元素绑定事件
    // 应用:批量生成 => 商品列表

    // 2. DOM新增元素动态生成
    // 优点: 新增的元素即为html元素,可以给该元素添加内容 属性 样式 和事件
    // 缺点: 对于复杂的html => 创建起来耗费时间
    // 应用: 插件  => (广告插件)

    function sendComment() {
        var comment = commentContent.value.trim();
        // var reg = / /g;
        // comment = comment.replace(reg, "");
        if (comment) {

            // 对评论进行敏感词过滤  => 替换为等量的*
            var keywordList = ["CNM", "NMD", "SB", "CAO", "菜逼"];

            // 一个一个过滤
            // for (var i = 0; i < keywordList.length; i++) {
            //     var keyword = keywordList[i]; // "菜逼"
            //     var reg = new RegExp(keyword, "ig");

            //     // 替换为等量的*
            //     // var replaceStr = "";
            //     // for (var j = 0; j<keyword.length;j++) {
            //     //     replaceStr += "*";
            //     // }

            //     var replaceStr = "*".repeat(keyword.length);

            //     comment = comment.replace(reg, replaceStr);
            // }

            // 统一过滤
            var keywordList = ["CNM", "NMD", "SB", "CAO", "菜逼"];
            var reg = new RegExp(keywordList.join("|"), "ig"); // /CNM|NMD|SB|CAO|菜逼/gi

            // replace(replacedStr,newStr)
            // replacedStr 被替换的字符串/规则
            // newStr      用于替换的新字符串
            // comment = comment.replace(reg, "*");

            // replace(replacedStr,callback)
            // replacedStr 被替换的字符串/规则
            // callback    在替换时执行,函数有一个形式参数用于接收被替换的字符串,根据函数的返回值确定用于替换的新字符串

            if (reg.test(comment)) { // 有敏感词 再替换
                comment = comment.replace(reg, function (matchStr) {
                    console.log(matchStr);
                    return "*".repeat(matchStr.length);
                });
            }



            // DOM新增
            var li = document.createElement("li");
            li.className = "comment-item";

            li.innerHTML = `<div class="comment-item-head">
                    <span>张三:</span>
                    <span>${comment}</span>
                </div>
                <div class="comment-item-content">
                    <span>${dateFormat("YYYY-MM-DD hh:mm")}</span>
                    <span>赞</span>
                    <span>踩</span>
                    <span>回复</span>
                </div>`
            commentList.prepend(li);




            commentContent.value = "";
            commentTips.textContent = `你还可以输入60个字`

        } else {
            alert("评论内容不能为空");
        }
    }

    function inputHandler(e) {
        var e = e || window.event;

        var sum = 60;
        var comment = commentContent.value.trim();

        // 去空格
        // var reg = / /g;
        // comment = comment.replace(reg, "");
        // commentContent.value = comment;

        var count = sum - comment.length;
        console.log(comment, count);

        commentTips.textContent = `你还可以输入${count}个字`

        if (count <= 0) {  //禁止用户输入
            if (e.preventDefault) {
                e.preventDefault()
            } else {
                e.returnValue = false;
            }

            // 中文输入法卡bug的问题  => 查出之后截取前60
            var type = e.type;
            if (type == "keypress" || type == "keyup") {
                var str = comment.substring(0, sum); //截取前60
                console.log(str);
                commentContent.value = str; //将截取的内容放到输入框(超出的内容 消失)
            }
            commentTips.textContent = `你还可以输入0个字`;
        }

        var keyCode = e.keyCode;
        if (e.ctrlKey && keyCode == 13) {
            sendComment();
        }

    }


</script>

</html>